<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import Fields from "@/views/system/generator/fields.vue";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    tableName: "",
    modelName: "",
    fields: [],
    title: "",
    routerPath: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-row :gutter="24" class="w-full">
      <el-col :span="12">
        <el-space fill>
          <el-alert type="info" show-icon :closable="false">
            <p>"模块路径"：当前业务所属的路径</p>
          </el-alert>
          <el-form-item label="模块路径" prop="routerPath">
            <el-input
              v-model="newFormInline.routerPath"
              :rows="4"
              clearable
              placeholder="例如: system"
            />
          </el-form-item>
        </el-space>
      </el-col>
      <el-col :span="12">
        <el-space fill>
          <el-alert type="info" show-icon :closable="false">
            <p>"业务名"：这是一个什么业务！</p>
          </el-alert>
          <el-form-item label="业务名" prop="title">
            <el-input
              v-model="newFormInline.title"
              clearable
              placeholder="例如：部门"
            />
          </el-form-item>
        </el-space>
      </el-col>
      <el-col :span="12">
        <el-space fill>
          <el-alert type="warning" show-icon :closable="false">
            <p>"数据库表名"：驼峰命名法,必须是一个复数，需要加 " s "</p>
          </el-alert>
          <el-form-item label="表名" prop="tableName">
            <el-input
              v-model="newFormInline.tableName"
              :rows="4"
              clearable
              placeholder="例如: depts"
            />
          </el-form-item>
        </el-space>
      </el-col>
      <el-col :span="12">
        <el-space fill>
          <el-alert type="warning" show-icon :closable="false">
            <p>"模型名"：首字母大写，和数据库表名一致,但不包含 " s "</p>
          </el-alert>
          <el-form-item label="模型名" prop="modelName">
            <el-input
              v-model="newFormInline.modelName"
              :rows="4"
              clearable
              placeholder="例如: Dept"
            />
          </el-form-item>
        </el-space>
      </el-col>
      <el-col :span="24">
        <el-space fill class="w-full">
          <el-alert type="info" show-icon :closable="false" class="w-full">
            <p>"字段名" 用户解释属性名含义；</p>
            <p>
              "属性名" 用于数据库字段，驼峰命名法，无需添加 " id "，" createdAt
              "，" updatedAt "，它们默认生成了；
            </p>
            <p>" 属性类型 "用于数据库字段的存储类型；</p>
          </el-alert>
          <el-form-item label="字段配置" prop="fields" class="w-full">
            <Fields v-model="newFormInline.fields" class="w-full" />
          </el-form-item>
        </el-space>
      </el-col>
    </el-row>
  </el-form>
</template>
